import Chart from './chart';
import * as com from './common';
import * as opt from './option';
import $ from 'jquery';
import Node, {Type} from './base';
import * as Util from '../js/util';
import echarts from 'echarts';
import config from './mapConfig';

const name = 'map';
const image = 'mapBase.png';

function getOption () {
  let option = {
    title: {
      text: '地图'
    },
    visualMap: opt.VisualMap(),
    geo: [{
      map: 'china',
      show: true,
      roam: false,
      center: [],
      aspectScale: 0.75,
      boundingCoords: null,
      zoom: 1,
      scaleLimit: {
        min: '',
        max: ''
      },
      selectedMode: false,
      itemStyle: $.extend(opt.ItemStyle(), {
        areaColor: '#eee',
        borderColor: '#ccc',
        borderWidth: 1
      }),
      label: $.extend(opt.getLabel(), {
        show: true, position: '', color: ''
      }),
      left: null,
      top: null,
      right: null,
      bottom: '',
      layoutCenter: null,
      layoutSize: '',
      regions: [],
      silent: false
    }],
    series: [{
      type: 'map',
      geoIndex: 0
    }],
    _series: $.extend({}, {
      data: [{name: '四川', value: 80}]
    })
  };
  $.extend(option.title, opt.getTitle());

  com.SyncSeries (option);
  return option;
}

// 图形主要设置
function Geo (grandFather) {
  let parent = grandFather['geo'][0];
  return {
    'name': '图形设置',
    'children': Util.flat([
      new Node('是否显示', 'show', parent, Type.Boolean),
      new Node('地图', 'map', parent, Type.Select, []),
      new Node('鼠标缩放', 'roam', parent, Type.Boolean),
      new Node('中心', 'center', parent, Type.ArrayText, ['', ''], ['经', '维']),
      new Node('长宽比', 'aspectScale', parent, Type.Value),
      new Node('缩放比例', 'zoom', parent, Type.Value),
      new Node('最小比例', 'min', parent.scaleLimit, Type.Value),
      new Node('最大比例', 'max', parent.scaleLimit, Type.Value),
      new Node('允许多选', 'selectedMode', parent, Type.Boolean),
      com.Position(parent),
      new Node('禁用鼠标', 'silent', parent, Type.Boolean)
    ])
  };
}

function getStyle (option) {
  let itemStyle = com.GetOption('ItemStyle', option.geo);
  itemStyle.children.push(new Node('区块颜色', 'areaColor', option.geo.itemStyle, Type.Color));
  console.log([
    com.Title(option),
    Geo(option),
    itemStyle,
    com.GetOption('Label', option.geo),
    com.GetOption('VisualMap', option)
  ]);
  return [
    com.Title(option),
    Geo(option),
    itemStyle,
    com.GetOption('Label', option.geo),
    com.GetOption('VisualMap', option)
  ]
}

function getPath() {
    var jsPath = document.currentScript ? document.currentScript.src : function(){
      var js = document.scripts
      ,last = js.length - 1
      ,src;
      for(var i = last; i > 0; i--){
        if(js[i].readyState === 'interactive'){
          src = js[i].src;
          break;
        }
      }
      return src || js[last].src;
    }();
    return jsPath.substring(0, jsPath.lastIndexOf('/') + 1);
  }

function draw (id, option) {
  if (!option) option = getOption();
  let geo = option.geo[0];
  if (geo.map === '') return;
  if (echarts.getMap(geo.map)) {
    Chart.draw(id, option, name);
    return;
  }

  if (geo.map in config.map) {
    let url = 'static/' + config.getGeoFilePath(geo.map);
    $.get(url + '.json', function (dtJson) {
        echarts.registerMap('china', dtJson);
        Chart.draw(id, option, name);
    });
  }
  com.SyncSeries(option);
}

const Map = {
  name: name,
  image: image,
  getOption: getOption,
  getStyle: getStyle,
  draw: draw
};

Chart.register(name, Map);

export default Map;
